<template>
    <a-card style="height: 100%;width: 100%;">
        <div class="card_title">
            <div class="card_flex" v-for="(itm, idx) in title" :key="idx">
                <div :class="tab_choose == idx ? 'active' : 'item'" @click="handleClick(idx)">{{ itm.title
                    }}</div>
            </div>
        </div>
        <a-divider />
        <a-form ref="formRef" :model="searchForm" :auto-label-width="true">
            <a-row>
                <a-col :span="6">
                    <a-form-item field="user" label="会员账号">
                        <a-input allow-clear v-model="searchForm.user" placeholder="会员账号" @keydown.enter="refresh" />
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item field="uid" label="会员UID">
                        <a-input allow-clear v-model="searchForm.uid" placeholder="会员UID" @keydown.enter="refresh" />
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-space size="mdeium" style="margin-left: 20px;">
                        <a-button type="primary" @click="search"><icon-search />搜索</a-button>
                        <a-button @click="reset" ><icon-refresh />重置</a-button>
                    </a-space>
                </a-col>
                
            </a-row>
        </a-form>
        <a-table :loading="loading" ref="crudRef" :data="tableData" :columns="columns" :pagination="false"
            :stripe="false" align="center">
            <template #area="{ record }">
                <div v-if="tab_choose != 'withdrawgj' && tab_choose != 'withdrawtw'">
                 {{ record.area_text }} 
                </div>
            </template>
            <template #state="{ record }">
                <div style="color:#fab005">{{ record.state_text }}</div>
                <div v-if="record.state">
                    <div>审核备注: {{ record.msg || '' }}</div>
                    <div>审核时间: {{ record.auth_time }}</div>
                </div>
            </template>
            <template #operation="{ record }">
                <a-button type="primary" size="mini" shape="round" class="yellow_color" @click="check(record)">去审核</a-button>
            </template>
        </a-table>
        <a-pagination class="pagination" @change="pageChange" @page-size-change="limitChange" :total="total"
            :show-total="true" :current="searchForm.page" :page-size="searchForm.limit" show-total show-jumper
            show-page-size />
        <checkForm ref="checkRef" @success="search"></checkForm>
    </a-card>
</template>
<script setup>
import { onMounted, ref, reactive, computed, watch } from 'vue'
import memberApi from '@/api/system/member'
import { Message } from '@arco-design/web-vue'
import { throttle } from 'lodash';
import tool from '@/utils/tool'
const tableData = ref([])
const tab_choose = ref(0)
import checkForm from './check.vue'
const loading = ref(false)
const checkRef=ref()
const formRef = ref()
const crudRef = ref()
const title = ref([])
const total = ref(0)
const searchForm = ref({
    user: '',
    uid: '',
    page: 1,
    limit: 10
})
const columns = reactive([
    { title: 'ID', dataIndex: 'id', width: 100 },
    { title: 'UID', dataIndex: 'user_id', width: 120 },
    { title: '会员名称', dataIndex: 'user_name', width: 120 },
    { title: '审核状态', slotName: 'state', width: 120,align:'center' },
    { title: '最近更新时间', dataIndex: 'update_time', width: 120 },
    { title: '操作', slotName: 'operation', width: 100 },
])

const check = (data) => { 
    let type=tab_choose.value==0?'auth':tab_choose.value==1?'bank':tab_choose.value==2?'transfer':tab_choose.value==3?'withdrawcn':'withdrawInvoice'
    checkRef.value?.open(data.id,type)
}
const refresh = async (idx) => {
    loading.value = true
    try {
        if (idx == 0) {
            const { data } = await memberApi.face_auth_list(searchForm.value)
            tableData.value = data.data
            total.value = data.total

        } else if (idx == 1) {

            const { data } = await memberApi.face_bank_list(searchForm.value)
            tableData.value = data.data
            total.value = data.total
        } else if (idx == 2) {

            const { data } = await memberApi.face_transfer_list(searchForm.value)
            tableData.value = data.data
            total.value = data.total
        } else if (idx == 3) {

            const { data } = await memberApi.face_withdrawgj_list(searchForm.value)
            tableData.value = data.data
            total.value = data.total
        } else if (idx == 4) {

            const { data } = await memberApi.face_invoice_list(searchForm.value)
            tableData.value = data.data
            total.value = data.total
        }
    } finally {
        loading.value = false
    }

}
const reset = () => { 
    searchForm.value.page = 1
    searchForm.value.limit = 10
    searchForm.value.user = ''
    searchForm.value.uid = ''
    refresh(tab_choose.value)
}
const search = () => { 
    refresh(tab_choose.value)
}
const pageChange = (page) => {
    searchForm.value.page = page;
    refresh(tab_choose.value)
};
const limitChange = (limit) => {
    searchForm.value.limit = limit;
    searchForm.value.page = 1
    refresh(tab_choose.value)
};
const handleClick = (e) => {
    console.log('e', e);
    tab_choose.value = e
    refresh(e)
}
const getparam = async () => {
    const { data } = await memberApi.face_page_config()
    title.value=data
}
onMounted(() => {
    getparam()
    refresh('auth')
})

</script>

<style lang="less" scoped>
.pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
.card_title {
    width: 458px;
    display: flex;
    justify-content: space-between;

    .card_flex {
        background-color: #f2f3f5;
        padding: 4px 15px;
        cursor: pointer;

        .active {
            color: #4c6ef5;
        }

        .item {}
    }
}
</style>
